<template>
  <div class="smart-workbench-header">
    <div class="header-main">
      <!-- 左侧：标题和统计 -->
      <div class="header-left">
        <h1 class="title">
          <el-icon class="title-icon"><TrendCharts /></el-icon>
          智能对账工作台
        </h1>
        <div class="stats">
          <div 
            v-for="stat in formattedStats" 
            :key="stat.title"
            class="stat-item"
            :class="`stat-${stat.type}`"
          >
            <div class="stat-value" :style="stat.style">
              {{ stat.value }}<span v-if="stat.suffix" class="stat-suffix">{{ stat.suffix }}</span>
            </div>
            <div class="stat-label">{{ stat.title }}</div>
          </div>
        </div>
      </div>

      <!-- 右侧：操作按钮 -->
      <div class="header-actions">
        <el-button-group class="action-group">
          <el-tooltip content="导入银行流水 (Ctrl+I)" placement="bottom">
            <el-button 
              type="primary" 
              :icon="Upload" 
              @click="$emit('import-data', 'transaction')"
              class="action-btn"
            >
              导入流水
            </el-button>
          </el-tooltip>
          
          <el-tooltip content="同步订单数据 (Ctrl+S)" placement="bottom">
            <el-button 
              :icon="Refresh" 
              @click="$emit('import-data', 'order')"
              class="action-btn"
            >
              同步订单
            </el-button>
          </el-tooltip>
        </el-button-group>

        <el-button 
          type="success" 
          :icon="MagicStick" 
          @click="$emit('smart-match')"
          class="smart-match-btn"
          :loading="isMatching"
        >
          <span class="btn-text">智能匹配</span>
          <span class="hotkey">Ctrl+M</span>
        </el-button>

        <el-button 
          :icon="Operation" 
          @click="$emit('batch-operate')"
          :disabled="!hasSelections"
          class="action-btn"
        >
          批量操作
        </el-button>
      </div>
    </div>

    <!-- 算法选择器 -->
    <div class="algorithm-selector">
      <span class="selector-label">匹配算法:</span>
      <el-radio-group 
        v-model="currentAlgorithm" 
        size="small" 
        @change="$emit('algorithm-change', currentAlgorithm)"
      >
        <el-radio-button value="comprehensive">
          <el-icon><DataAnalysis /></el-icon>
          综合算法
          <el-tooltip content="综合考虑金额、名称、时间等多个因素进行匹配，适用于大多数场景" placement="top">
            <el-icon class="info-icon"><QuestionFilled /></el-icon>
          </el-tooltip>
        </el-radio-button>
        <el-radio-button value="exact">
          <el-icon><Check /></el-icon>
          精确匹配
          <el-tooltip content="只匹配金额完全相同且名称高度相似的记录，准确率最高但匹配数量较少" placement="top">
            <el-icon class="info-icon"><QuestionFilled /></el-icon>
          </el-tooltip>
        </el-radio-button>
        <el-radio-button value="amount_first">
          <el-icon><Coin /></el-icon>
          金额优先
          <el-tooltip content="优先按金额相似度进行匹配，适合处理金额有微小差异的情况" placement="top">
            <el-icon class="info-icon"><QuestionFilled /></el-icon>
          </el-tooltip>
        </el-radio-button>
        <el-radio-button value="time_window">
          <el-icon><Timer /></el-icon>
          时间窗口
          <el-tooltip content="在指定时间范围内进行匹配，适合处理时间相近的交易记录" placement="top">
            <el-icon class="info-icon"><QuestionFilled /></el-icon>
          </el-tooltip>
        </el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { 
  TrendCharts, 
  Upload, 
  Refresh, 
  MagicStick, 
  Operation,
  DataAnalysis,
  Check,
  Coin,
  Timer,
  QuestionFilled
} from '@element-plus/icons-vue'

interface Props {
  stats: {
    pendingTransactions: number
    pendingOrders: number
    matchedCount: number
    accuracyRate: number
    efficiencyScore: number
  }
  isMatching?: boolean
}

const props = defineProps<Props>()
const emit = defineEmits(['import-data', 'smart-match', 'batch-operate', 'algorithm-change'])

const currentAlgorithm = ref('comprehensive')

const formattedStats = computed(() => [
  {
    title: '待匹配流水',
    value: props.stats.pendingTransactions,
    style: { color: '#1890ff' },
    type: 'transactions'
  },
  {
    title: '待匹配订单', 
    value: props.stats.pendingOrders,
    style: { color: '#722ed1' },
    type: 'orders'
  },
  {
    title: '已匹配数量',
    value: props.stats.matchedCount, 
    style: { color: '#52c41a' },
    type: 'matched'
  },
  {
    title: '对账准确率',
    value: props.stats.accuracyRate,
    suffix: '%',
    style: { color: '#fa8c16' },
    type: 'accuracy'
  },
  {
    title: '效率评分',
    value: props.stats.efficiencyScore,
    style: { color: '#13c2c2' },
    type: 'efficiency'
  }
])

const hasSelections = computed(() => 
  props.stats.pendingTransactions > 0 || props.stats.pendingOrders > 0
)
</script>

<style scoped lang="scss">
.smart-workbench-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  margin-bottom: 20px;
  
  .header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .header-left {
      .title {
        margin: 0 0 16px 0;
        font-size: 26px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
        
        .title-icon {
          font-size: 32px;
        }
      }
      
      .stats {
        display: flex;
        gap: 32px;
        flex-wrap: wrap;
        
        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          
          .stat-value {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 4px;
            display: flex;
            align-items: baseline;
            
            .stat-suffix {
              font-size: 14px;
              margin-left: 2px;
            }
          }
          
          .stat-label {
            font-size: 13px;
            opacity: 0.9;
            font-weight: 500;
          }
        }
      }
    }
    
    .header-actions {
      display: flex;
      gap: 16px;
      align-items: center;
      
      .action-group {
        .el-button {
          border: none;
        }
      }
      
      .action-btn {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        
        &:hover {
          background: rgba(255, 255, 255, 0.25);
        }
        
        &:focus {
          background: rgba(255, 255, 255, 0.2);
        }
      }
      
      .smart-match-btn {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
        border: none;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
          transition: left 0.5s;
        }
        
        &:hover::before {
          left: 100%;
        }
        
        .btn-text {
          position: relative;
          z-index: 1;
        }
        
        .hotkey {
          font-size: 11px;
          opacity: 0.9;
          margin-left: 6px;
          background: rgba(0, 0, 0, 0.2);
          padding: 2px 6px;
          border-radius: 4px;
        }
      }
    }
  }
  
  .algorithm-selector {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .selector-label {
      font-size: 15px;
      font-weight: 500;
      opacity: 0.95;
    }
    
    :deep(.el-radio-group) {
      .el-radio-button {
        .el-radio-button__inner {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.3);
          color: white;
          border-radius: 6px;
          margin-right: 8px;
          padding: 8px 16px;
          display: flex;
          align-items: center;
          gap: 6px;
          
          .el-icon {
            font-size: 16px;
          }
          
          .info-icon {
            font-size: 14px;
            opacity: 0.7;
          }
          
          &:hover {
            background: rgba(255, 255, 255, 0.2);
          }
        }
        
        &.is-active {
          .el-radio-button__inner {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .smart-workbench-header {
    padding: 16px 20px;
    
    .header-main {
      flex-direction: column;
      gap: 20px;
      align-items: stretch;
      
      .stats {
        justify-content: space-around;
        gap: 16px;
        
        .stat-item {
          .stat-value {
            font-size: 18px;
          }
        }
      }
      
      .header-actions {
        justify-content: center;
        flex-wrap: wrap;
      }
    }
    
    .algorithm-selector {
      justify-content: center;
      flex-wrap: wrap;
    }
  }
}

@media (max-width: 768px) {
  .smart-workbench-header {
    padding: 14px 16px;
    margin-bottom: 16px;
    
    .header-main {
      .header-left {
        .title {
          font-size: 22px;
          margin-bottom: 12px;
          
          .title-icon {
            font-size: 26px;
          }
        }
        
        .stats {
          gap: 16px;
          
          .stat-item {
            .stat-value {
              font-size: 16px;
            }
            
            .stat-label {
              font-size: 12px;
            }
          }
        }
      }
      
      .header-actions {
        gap: 10px;
        
        .smart-match-btn {
          .hotkey {
            display: none;
          }
        }
      }
    }
    
    .algorithm-selector {
      gap: 12px;
      
      .selector-label {
        font-size: 14px;
      }
      
      :deep(.el-radio-group .el-radio-button .el-radio-button__inner) {
        padding: 6px 12px;
        font-size: 13px;
        
        .el-icon {
          font-size: 14px;
        }
      }
    }
  }
}
</style>